﻿@page "/Tree-Grid/SortingAPI"

@using Syncfusion.Blazor.TreeGrid
@using Syncfusion.Blazor.Grids
@using Syncfusion.Blazor.Buttons
@using Syncfusion.Blazor.DropDowns
@using Syncfusion.Blazor.Data
@using Syncfusion.Blazor
@*Hidden:Lines*@
@using BlazorDemos
@using ej2_blazor_treedata
@inherits SampleBaseComponent;
@*End:Hidden*@

<SampleDescription>
    
</SampleDescription>
<ActionDescription>
   
</ActionDescription>


<div class="col-lg-12 control-section">
    <div class="content-wrapper">
        <div class="row">
            <SfTreeGrid TValue="BusinessObject" height="380" ChildMapping="Children" AllowPaging="true" TreeColumnIndex="1" AllowSorting="true">
                <SfDataManager Json="@TreeGridData" Adaptor="Adaptors.JsonAdaptor"></SfDataManager>
                <TreeGridColumns>
                    <TreeGridColumn Field="TaskId" HeaderText="Order Name" Width="90" TextAlign="TextAlign.Right"></TreeGridColumn>
                    <TreeGridColumn Field="TaskName" HeaderText="Category" Width="200"></TreeGridColumn>
                    <TreeGridColumn Field="Duration" HeaderText="Priority" Width="135" TextAlign="TextAlign.Right"></TreeGridColumn>
                    <TreeGridColumn Field="StartDate" HeaderText="Start Date" Format="d" Type=ColumnType.Date Width="100" TextAlign="TextAlign.Right"></TreeGridColumn>
                    <TreeGridColumn Field="Progress" HeaderText="Progress" Width="90" TextAlign="TextAlign.Right"></TreeGridColumn>
                </TreeGridColumns>
            </SfTreeGrid>

        </div>
    </div>
</div>

@*<div class="col-lg-3 property-section">
        <h4 style="margin-top:38px;">Properties</h4>

        <table Id="property" style="width: 73%; height: 180px;">
            <tr>
                <td class="left-side" style="padding-right:15px;">Column</td>
                <td>
                    <SfDropDownList ID="names" Index="0" PopupWidth="110px" DataSource="@names">
                        <DropDownListFieldSettings text="Id" value="Name"></DropDownListFieldSettings>
                    </SfDropDownList>
                </td>
            </tr>

            <tr>
                <td class="left-side" style="padding-right:15px;">Direction</td>
                <td>
                    <SfDropDownList ID="direction" Index="0" PopupWidth="110px" DataSource="@direction">
                        <DropDownListFieldSettings text="Id" value="Name"></DropDownListFieldSettings>
                    </SfDropDownList>
                </td>
            </tr>

            <tr>
                <td>
                    <SfButton Id="sort" IsPrimary="true">Sort</SfButton>
                </td>
                <td style="padding-left:18px;">
                    <SfButton Id="clear" IsPrimary="true">Clear</SfButton>
                </td>
            </tr>
        </table>
    </div>*@

@code{

    public class ColumnNames
    {
        public string Id { get; set; }

        public string Name { get; set; }
    }

    public class ColumnDirection
    {
        public string Id { get; set; }

        public string Name { get; set; }
    }

    List<ColumnNames> Names = new List<ColumnNames>()
    {
        new ColumnNames(){ Id= "TaskId", Name= "Task Id" },
        new ColumnNames(){ Id= "TaskName", Name= "Task Name" },
        new ColumnNames(){ Id= "Duration", Name= "Duration" },
        new ColumnNames(){ Id= "Progress", Name= "Progress" },
    };

    List<ColumnDirection> Direction = new List<ColumnDirection>()
{
        new ColumnDirection(){ Id= "Ascending", Name= "Ascending" },
        new ColumnDirection(){ Id= "Descending", Name= "Descending" },
    };

    public BusinessObject[] TreeGridData { get; set; }

    protected override void OnInitialized()
    {
        this.TreeGridData = TreeData.GetDefaultData().Cast<BusinessObject>().ToArray();
    }
}
